<template>
	<view class="mybody">
		<view class="flex-sc-ac my-head">登录仿糗百，体验更多新功能</view>
		<view class="flex-sc-ac" style="margin-top: 30rpx;margin-bottom: 30rpx;">
			<view class="icon iconfont icon-weixin denglu1"></view>
			<view class="icon iconfont icon-QQ denglu2"></view>
			<view class="icon iconfont icon-xinlangweibo denglu3"></view>
		</view>
		<view class="flex-sc-ac my-denglu" @tap="loginMy()">账号密码登录
			<view class="icon iconfont icon-jinru" style="margin-top: 5rpx;"></view>
		</view>
		<view class="flex-sc-ac">
			<view>
				<view class="flex-sc-ac my-shuzi">0</view>
				<view class="flex-sc-ac my-wenzi">糗事</view>
			</view>
			<view>
				<view class="flex-sc-ac my-shuzi">0</view>
				<view class="flex-sc-ac my-wenzi">动态</view>
			</view>
			<view>
				<view class="flex-sc-ac my-shuzi">0</view>
				<view class="flex-sc-ac my-wenzi">评论</view>
			</view>
			<view>
				<view class="flex-sc-ac my-shuzi">0</view>
				<view class="flex-sc-ac my-wenzi">收藏</view>
			</view>
		</view>
		<view style="margin-top: 20rpx;">
			<view class="flex-sp-ac list-header">
				<view class="flex-ac" style="margin-left: 30rpx;">
					<view class="icon iconfont icon-liulan active" style="margin-right: 15rpx;margin-top: 5rpx;"></view>
					浏览历史
				</view>
				<view class="icon iconfont icon-jinru" style="margin-right: 30rpx;"></view>
			</view>
			<view class="flex-sp-ac list-header">
				<view class="flex-ac" style="margin-left: 30rpx;">
					<view class="icon iconfont icon-huiyuanvip active-huiyuan"
						style="margin-right: 15rpx;margin-top: 5rpx;"></view>糗百认证
				</view>
				<view class="icon iconfont icon-jinru" style="margin-right: 30rpx;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			loginMy() {
				uni.navigateTo({
					url:'../login/login'
				});
			}
		}
	}
</script>

<style>
	.mybody {
		margin-top: 60rpx;
	}

	.my-head {
		font-size: 25rpx;
		margin-bottom: 20rpx;
	}

	.denglu1 {
		font-size: 40rpx;
		color: white;
	}

	.denglu1 {
		background-color: #2BD19B;
		padding: 40rpx;
		border-radius: 50%;
		margin-right: 40rpx;
	}

	.denglu2 {
		color: white;
		background-color: #2CAEFC;
		font-size: 40rpx;
		padding: 40rpx;
		border-radius: 50%;
		margin-right: 40rpx;
	}

	.denglu3 {
		color: white;
		background-color: #FC7729;
		font-size: 40rpx;
		padding: 40rpx;
		border-radius: 50%;
	}

	.my-denglu {
		font-size: 25rpx;
		color: #555555;
		margin-bottom: 30rpx;
	}

	.my-shuzi {
		font-size: 40rpx;
		padding: 0rpx 60rpx;
	}

	.my-wenzi {
		margin-top: 10rpx;
		font-size: 25rpx;
		color: #555555;
	}

	.list-header {
		height: 100rpx;
		font-size: 30rpx;
		border-bottom: #f4f4f4 1rpx solid;
	}

	.active {
		color: #44b3ff;
		font-size: 30rpx;
	}

	.active-huiyuan {
		color: #ff7434;
	}
</style>
